import vueQr from 'vue-qr'
import Vue from 'vue'

const QrCodeConstructor = Vue.extend(vueQr)

/**
 *
 * @param {Object} options  二维码配置参数, 参数如下
 *  - qid: 唯一标识，在一个页面中包含多个二维码时，用qid进行区分
 *  - text：二维码中包含的内容
 *  - correctLevel：容错级别0-3, 默认为：1
 *  - size：尺寸，长宽一致，包含外边距，默认为：200，单位为像素
 *  - margin： 二维码图像的外边距，默认为：20，单位为像素
 *  - colorDark： 二维码实点的颜色, 默认为：#000000
 *  - colorLight：二维码空白区的颜色， 默认为：#FFFFFF
 *  - bgSrc：背景图片的地址
 *  - gifBgSrc： 背景图gif地址，设置后普通的背景图将失效。设置此选项会影响性能
 *  - backgroundColor: 背景颜色，包含外边距的颜色，默认为：rgba(0,0,0,0)
 *  - backgroundDimming: 叠加在背景图上的颜色，在解码有难度时有一定的帮助，默认为：rgba(0,0,0,0)
 *  - logoSrc: 嵌入在二维码中心的logo图片地址
 *  - logoScale：用于计算logo大小，值过大，logo占据的空间越大，二维码显示的空间变小，
 *      导致解码失败，logo尺寸计算公式：logoScale * (size - margin * 2), 默认值为：0.2
 *  - logoMargin: logo图片周围的空白边框，默认为：0，单位为像素
 *  - logoBackgroundColor: logo的背景色，需要logoMargin大于0，才能显示背景色
 *  - logoCornerRadius：logo图片及边框的圆角半径
 *  - whiteMargin: 若设为true，背景图外将绘制白色边框，默认为：true
 *  - dotScale: 数据区域点缩小比例，取值范围：（0，1），默认值为：1
 *  - autoColor：若为true，背景图的主要颜色将作为实点的颜色，即colorDark，默认为：true
 *  - binarize: 若为true，图像将被而被二值化处理，未指定阈值，则使用默认值，默认为：false
 *  - binarizeThreshold: 二值化处理的阈值，取值范围：（0，255），默认值为：128
 *  - callback：生成的二维码Data URI（base64）可以在回调中取得，第一个参数为二维码data URI，第二个参数为props传
 *      过来的qid（因为二维码生成是异步的，所以加个id用于排序）
 *  - bindElement：指定是否需要自动将生成的二维码绑定HTML上。默认为true。
 */
export function generateQrCode(options) {
  const qrCodeDom = new QrCodeConstructor({
    propsData: {
      ...options,
      bindElement: false
    }
  })
  qrCodeDom.$mount()
  document.body.appendChild(qrCodeDom.$el)
}
